<template>
  <div class="loginForm">
    <div class="loginBak">
      <img src="../../assets/image/login/bac.png" alt="" srcset="" />
    </div>
    <div class="login">
      <div class="loginFormBox">
        <div class="jusCenter">
          <div class="logo center">
            <img src="../../assets/image/login/logo.png" alt="" srcset="" />
          </div>
        </div>
        <div class="hint">
          <div class="hintTitle jusCenter">{{ $t('messages.login.hintTitle') }}</div>
          <div class="hintSize jusCenter">{{ $t('messages.login.hintSize') }}</div>
        </div>
        <div class="formData center">
          <el-form :model="form" label-width="auto">
            <el-form-item>
              <el-input
                placeholder="Account"
                :prefix-icon="User"
                class="formInput"
                v-model="form.phone"
              />
            </el-form-item>
            <el-form-item>
              <el-input
                :prefix-icon="Lock"
                v-model="form.password"
                show-password
                class="formInput"
                placeholder="Password"
              />
            </el-form-item>
            <el-form-item>
              <div class="footButton">
                <div @click="loginFn" class="button center">{{ $t('messages.login.button') }}</div>
              </div>
            </el-form-item>
            <el-form-item>
              <div
                style="width: 100%; cursor: pointer"
                v-if="selectType == 'user'"
                class="title center"
                @click="selectLogin('store')"
              >
                Switch Store Logins
              </div>
              <div
                style="width: 100%; cursor: pointer"
                v-else
                class="title center"
                @click="selectLogin('user')"
              >
                Switch User Logins
              </div>
            </el-form-item>
            <el-form-item>
              <div style="width: 100%" class="size center" @click="goRegisterFn">register?</div>
            </el-form-item>
            <el-form-item>
              <div style="width: 100%" class="size center" @click="goChangePassword">
                Forgot your password?
              </div>
            </el-form-item>
            <el-form-item>
              <div style="width: 100%" class="size center" @click="goChangePassword">
                Change your password
              </div>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { loginOfficial, loginStore } from '@/http/api/login.js'
import { User, Lock } from '@element-plus/icons-vue'
import { ref, reactive } from 'vue'
import Cookie from 'js-cookie'
import { useRouter } from "vue-router"
import { ElMessage } from 'element-plus'
const router = useRouter()
const form = reactive({})
let selectType = ref('user')

const goRegisterFn = () => {
  if (selectType.value == 'user') {
    router.push('/register')
  } else {
    router.push('/storeRegister')
  }
}
const loginFn = async () => {
  try {
    if (selectType.value == 'user') {
      try {
        const res = await loginOfficial(form)
        ElMessage({
          message: res.message,
          type: 'success',
        })
        Cookie.set('token', res.token)
        router.push('/my')
        localStorage.setItem('userInfo', JSON.stringify(res.res))
      } catch (error) {
        ElMessage({
          message: error.response.data.message,
          type: 'error',
        })
      }
    } else {
      const res = await loginStore(form)
      ElMessage({
        message: res.message,
        type: 'success',
      })
      Cookie.set('token', res.token)
      router.push('/storeMy')
      localStorage.setItem('storeInfo', JSON.stringify(res.res))
    }

  } catch (error) {
    ElMessage({
      message: error.response.data.message,
      type: 'error',
    })
  }
}
const goChangePassword = () => {
  if (selectType.value == 'user') {
    router.push('/userChangePassword')
  } else {
    router.push('/storeChangePassword')
  }

}
const selectLogin = (data) => {
  selectType.value = data
}
</script>

<style lang="scss" scoped>
.loginForm {
  width: 100%;
  height: 100vh;
  overflow: hidden;
  position: relative;
  .loginBak {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    width: 1920px;
    height: 100%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .login {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    transform: translate(-50%, -50%);
  }
  .loginFormBox {
    // display: flex;
    // justify-content: center;
    // flex-wrap: wrap;
  }
}
.formInput {
  width: 400px;
  height: 80px;
}
.logo {
  width: 250px;
  height: 250px;
  img {
    width: 250px;
    height: 250px;
  }
}
.hint {
  .hintTitle {
    font-size: 23px;
    color: #ffdd00;
  }
  .hintSize {
    font-size: 19px;
    color: #ffdd00;
  }
}
.footButton {
  width: 400px !important;
}
.button {
  width: 400px !important;
  height: 80px;
  background: #ffdd00;
  font-size: 22px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}
.button:active {
  opacity: 0.9;
}
.size {
  color: #ffdd00;
  cursor: pointer;
}
.size:hover {
  text-decoration: underline;
}
::v-deep .el-dialog__header {
  padding: 0 !important;
}
::v-deep .el-dialog {
  padding: 0;
  border-radius: 20px;
  width: 1800px;
}
</style>